﻿body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{color:#333; font-size:12px;font-family:"Microsoft YaHei";background-color: #459dff;}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
input{ font-size:12px;}
a{ text-decoration:none; color:#000;}
a:hover{color:#c00; text-decoration:none;}
.clear{clear:both;}
.wrap{
    position: relative;
    width: 6.4rem;
    margin: 0 auto;
}
.head{
    height:6.88rem ;
    background: url("../images/banner_bg.png") no-repeat center;
    background-size: contain;
    overflow: hidden;
}
.can_container{
    width: 5.82rem;
    height: 3.92rem;
    margin: 2.8rem auto;
    background: url("../images/wenli.png") no-repeat center;
    background-size: contain;
    overflow: hidden;
}
#can_con{
    width: 5.52rem;
    height: 3.38rem;
    margin: .26rem auto;
    background-size: contain;
}
.btn-shake{
    position: absolute;
    top:50%;
    left: 50%;
    width: 2.6rem;
    margin-left: -1.3rem;
    margin-top:-.3rem ;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    background: #ffbf13;
    color: #fff;
    font-size: .3rem;
    border-radius: .05rem;

}
#can{
    display: block;
    width: 5.52rem;
    height: 3.38rem;
    margin: .26rem auto;
}
.swiper-tit{
    height: .5rem;
    background: url("../images/tit_bg.png") no-repeat #e14a4a center;
    background-size: contain;
}
.swiper-container{
    background-color:#e14a4a;
    height: 2.10rem;
    padding-top: .3rem;
    padding-left: .3rem;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
}
.swiper-container .swiper-slide{
    width: 1.35rem;
    height: 1.71rem;
    margin-left: .2rem;
}
.swiper-container .swiper-slide p:nth-child(1){
    width:1.35rem ;
    height: 1.35rem;
    border: .04rem solid #fee07f;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;

}
.swiper-container .swiper-slide p img{
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
}
.swiper-container .swiper-slide p:nth-child(2){
    width:1.35rem ;
    text-align: center;
    font-size: .2rem;
    color: #fff;
    padding: .05rem 0;
}
.fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: .4rem;
    text-align: center;
    background-color: #3c93f3;
    color: #fff;
    line-height: .4rem;
    font-size: .2rem;
}
.rule_btn{
    position: absolute;
    left: .4rem;
    top:.2rem;
    width:.92rem;
    height: .37rem;
    background: url('../images/rule_icon.png') no-repeat center;
    background-size: contain;
}
.myprize_btn{
    position: absolute;
    right: 0;
    top:0;
    width:1.08rem;
    height: 1.08rem;
    background: url('../images/myprize_icon.png') no-repeat center;
    background-size: contain;
}
/*规则弹出层*/
.rule-model{
    display: none;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    z-index: 1000;
}
.rule-container{
    width: 5.78rem;
    height: 7.59rem;
    background: url("../images/rule_bg.png") no-repeat center;
    background-size: contain;
    margin: 1rem auto;
    overflow: hidden;
}
.rule-container .container{
    width: 4rem;
    height: 4.6rem;
    position: relative;
    margin: 2.4rem auto;
    font-size: .2rem;
    overflow: hidden;
}
.text-wrap{
    width: 100%;
    height: 100%;
}
.text-wrap .swiper-slide{
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .2rem;
}
.text-wrap .swiper-slide p{
    color: #fff;
}
.text-wrap .nav{

    display: block;
    padding-right: .2rem;
    position: relative;
    overflow: hidden;
    height: .62rem;
    cursor: pointer;
    border-radius: .04rem .04rem 0 0;
    background-color: #9d5627;
    background: 0 0;
    line-height: .62rem;
}
.text-wrap .nav i{
    display: inline-block;
    width: .12rem;
    height: .12rem;
    transition: all .3s ease-in-out;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transform-origin: .03rem .03rem;
    transform-origin: .03rem .03rem;
    vertical-align: -.04rem;
    border: .02rem solid transparent;
    border-left-color: #893d0f;
    border-top-color: #893d0f;
    margin-left: .2rem;

}

.text-wrap .text{
    font-size: .1rem;
    line-height: 1.4285;
    display: none;
    padding-top: .1rem;
    text-align: justify;
    color: #8c160d;
}
.close{
    width: .5rem;
    height: .5rem;
    position: absolute;
    top: 0;
    left: 46%;
   /* background-color: rgba(255,255,255,.5);*/
}
/*红包弹出层*/
.hongbao_model{
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(100,100,100,.5);
}
.hongbao_model_container{
    display: none;
    margin: 0 auto;
    width: 6.4rem;
    height: 70%;
    background: #fff;
    border-radius: .05rem;
    position: relative;
    overflow: hidden;
}
.hongbao_swiper{
    width: 100%;
    height: 90%;
}
.hongbao_model_container .swiper-slide{
    height: auto;
}
.hongbao_model_container .head_img{
    width: 100%;
}
.hongbao_model_container .sum{
    font-size: .32rem;
    padding-left: .2rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid #ddd;
}
.hongbao_model_container .tit{
    line-height: .6rem;
    font-size: .24rem;
    padding-left: .2rem;
}
.hongbao_model_container .des{
    font-size: .24rem;
    padding:0  .4rem;
    line-height: .3rem;
    padding-bottom: .3rem;
}
.hongbao_model .close{
    position: absolute;
    top: 7.5rem;
    left: 50%;
    margin-left:-.4rem;
    width: .8rem;
    height: .8rem;
    background: rgba(255,100,0,.7);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: .8rem;
    z-index: 10;
    font-size: .2rem;
}
/*弹出红包*/
.model{
    display: none;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
}
.model .close{
    position: absolute;
    top:-.5rem;
    right: .5rem;
    width:.5rem ;
    height: .5rem;
    background: url("../images/close.png") no-repeat;
    background-size: contain;
}
.model_prize .light{
    display: none;
    position: absolute;
    top:-1.7rem;
    left: -.64rem;
    width: 7.5rem;
    height: 7.5rem;
    background: url("../images/light.png") no-repeat top center;
    background-size: contain;
    animation: myRotate 6s linear infinite;
}
@keyframes myRotate{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
.model_prize .wrap{
    background:url("../images/redpacks.png") no-repeat ;
    background-size: contain;
}
.model .hb-template{
    width: 6rem;
    height: 7rem;
    margin: 2rem auto;
    position: relative;
}
@media screen and (min-width: 1026px){
    .model .hb-template{
        width: 6rem;
        height: 7rem;
        margin: .2rem auto;
        position: relative;
    }
}
.hb-template .back{
    position: absolute;
    bottom: 0;
    left: .2rem;
    width: 5.6rem;
    height: 4.34rem;
    background: url("../images/bg-back.png") no-repeat;
    background-size: contain;
}
.hb-template .body{
    position: absolute;
    top:.6rem;
    left:.71rem ;
    width: 4.58rem;
    height: 3.53rem;
    background: url("../images/body.png") no-repeat;
    background-size: contain;
}
.hb-template .body img{
    position: absolute;
    bottom: .4rem;
    left: .49rem;
    width: 3.6rem;
    height: 2rem;
}
.hb-template .front{
    position: absolute;
    bottom:0;
    left:.2rem ;
    width: 5.60rem;
    height: 3.84rem;
    background: url("../images/bg-front-low.png") no-repeat;
    background-size: contain;
}
.hb-template .front .p1{
    font-size: .4rem;
    text-align: center;
    color: #ffbf13;
    margin-top: .6rem;
}
.hb-template .front .prize{
    font-size: .6rem;
    text-align: center;
    color: #fff;
    margin-top: .1rem;
}
.hb-template .front .btn{
    display: block;
    line-height:.8rem;
    font-size: .5rem;
    text-align: center;
    width:5.06rem ;
    height: 1.02rem;
    background: url("../images/button.png") no-repeat;
    background-size: contain;
    margin: .4rem auto;
}